<template>
	<mui-paper :mClass="'mui-alert mui-color-'+(color || severity)+' mui-variant-'+variant+' '+mClass" :mStyle="mStyle"
		:elevation="0">
		<view class="alert-icon" :style="_showIconStyle">
			<mui-icon v-if="icon" :color="icon.color" :mClass="icon.class || ''" :mStyle="icon.style || ''"
				:name="icon.name || icon" :size="icon.size" />
			<slot v-else name="icon" />
		</view>
		<view class="alert-message">
			<mui-alert-title v-if="title">{{title}}</mui-alert-title>
			<block v-if="message">
				{{message}}
			</block>
			<slot v-else />
		</view>
		<view class="alert-action">
			<mui-button v-if="_hasAction && closeText" catchtap="_close" color="inherit" size="small">
				{{closeText || ''}}
			</mui-button>
			<mui-icon-button v-else-if="_hasAction" catchtap="_close" color="inherit"
				:icon="(closeIcon.name || closeIcon || 'close')" :iconColor="closeIcon.color" :iconSize="closeIcon.size"
				mStyle="padding: 3px;width: auto;height:auto;" size="small" />
			<slot v-else name="action" />
		</view>
	</mui-paper>
</template>

<script>
	export default {
		name: "mui-alert",
		data() {
			return {
				_hasAction: false,
				_showIconStyle: ''
			};
		},
		props: {
			mClass: {
				type: String,
				default: ''
			},
			mStyle: {
				type: String,
				default: ''
			},
			closeText: {
				type: String,
				default: null
			},
			closeIcon: {
				type: String,
				optionalTypes: [Object],
				default: null
			},
			color: {
				type: String,
				default: null
			},
			icon: {
				type: Boolean,
				optionalTypes: [String, Object],
				default: null
			},
			message: {
				type: String
			},
			onClose: {
				// @ts-ignore
				type: Function,
				default: null
			},
			severity: {
				type: String,
				default: 'success'
			},
			title: {
				type: String,
				default: null
			},
			variant: {
				type: String,
				default: 'standard'
			}
		},
		mounted() {
			var _this = this;
			var _data = _this.$data,
				icon = _data.icon,
				color = _data.color;
			if (typeof icon !== 'boolean' && !icon) {
				this._setIcon(color);
			}
		},
		methods: {
			_setIcon: function _setIcon(severity) {
				var severity2icon = {
					success: 'checkbox-marked-circle-outline',
					info: 'info-outline',
					warning: 'alert-outline',
					error: 'alert-circle-outline'
				}
				this.$data.icon = severity2icon[severity] || 'success'
				//this.$set(this.$data, 'icon', severity2icon[severity] || 'success');
			},
			_close: function _close(e) {
				var onClose = this.$data.onClose;
				if (onClose && typeof onClose === 'function') {
					console.log("dataset:");
					console.log(this.dataset);
					onClose(e, this.dataset);
				}
			}
		},
		computed: {
			params() {
				const {
					icon,
					severity
				} = this;
				return {
					icon,
					severity
				}
			},
			params2() {
				const {
					onClose,
					closeText
				} = this;
				return {
					onClose,
					closeText
				}
			}
		},
		watch: {
			params: {
				handler(val) {
					var icon = val.icon;
					var severity = val.severity;
					if (typeof icon !== 'boolean' && !icon) {
						this._setIcon(severity);
					}
					if (typeof icon === 'boolean' && !icon) {
						this.$data._showIconStyle = 'display: none;';
						//this.$set(this.$data, '_showIconStyle', 'display: none;');
					}
				},
				immediate:true,
			},
			params2: {
				handler(val) {
					var onClose = val.onClose;
					var closeText = val.closeText;
					if (onClose || closeText) {
						this.$data._hasAction = true;
						//this.$set(this.$data, '_hasAction', true);
					} else {
						this.$data._hasAction = false;
						//this.$set(this.$data, '_hasAction', false);
					}
				},
				immediate:true,
			}
		},
		options: {
			virtualHost: true,
			pureDataPattern: /^_pure/,
			styleIsolation: 'apply-shared',
			multipleSlots: true
		}
	}
</script>

<style>

</style>